<template>
    <div class='bottom'>
      <router-link tag="div" to="/"  :class="{'active2':$route.path=='/'}">
          <i class="iconfont icon" style="font-size: 0.6rem">&#xe624;</i>
          <span style="display: inline-block;">首页</span>
      </router-link>
      <router-link tag="div" to="/course" :class="{'active2':$route.path=='/course'}">

          <i class="iconfont icon">&#xe61a;</i>
          <span style="margin-top:0.12rem">精品课程</span>

      </router-link>

      <router-link tag="div" to="/contact" :class="{'active2':$route.path=='/contact'}">

          <i class="iconfont icon"  style="font-size: 0.6rem">&#xe661;</i>
          <span style="display: inline-block;">在线咨询</span>

      </router-link>
      <router-link tag="div" to="/down" :class="{'active2':$route.path=='/down'}">

          <i class="iconfont icon">&#xe600;</i>
          <span style="margin-top:0.12rem">题库下载</span>

      </router-link>


    </div>
</template>
<script>
    export default {
        name: 'hello',
        data() {
            return {
                count: '',
            }
        },
        created() {

        },
        mounted() {

        },
        methods: {}
    }
</script>
<style scoped>
    .bottom {
      width: 100%;
      height: 1.12rem;
      border-top: 1px solid #f0f0f0;
      background: #fdfdfd;
      position: fixed;
      z-index: 99;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: row;
    }
  .bottom div{
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
  }
    .active2 span{
      color: #39f;
    }
    .active2 i{
      color: #39f;
    }
  .bottom div span{
    font-size: 0.28rem;
  }
  .icon{
    font-size: 25px;
    color: #999;
  }
    .active2{
      color: #39f;
    }

</style>
